<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户表</title>
</head>
<body>
<div>
    <input type="text" v-model="user.name" placeholder="用户名">
    <input type="text" v-model="user.role" placeholder="角色">
    <input type="text" v-model="user.permission" placeholder="权限">
    <input type="button" value="添加" @click="add()">
    <table border="1">
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>角色</th>
            <th>权限</th>
        </tr>
        <tr v-for="(user,i) in arr">
            <td>{{i+1}}</td>
            <td>{{user.name}}</td>
            <td>{{user.role}}</td>
            <td>{{user.permission}}</td>
            <td><input type="button" value="删除" @click="del()"></td>
        </tr>
    </table>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            user: {i:'',name:'',role:'',permission:''},
            arr:[{name:'张三',role:'销售员',permission:'销售'},{name:'李四',role:'销售员',permission:'销售'},
                {name:'王五',role:'销售员',permission:'销售'}, {name:'郭德纲',role:'演员',permission:'表演'},
                {name:'岳云鹏',role:'演员',permission:'表演'},{name:'阿拉蕾',role:'电工',permission:'修电箱'}]
        },
        methods:{
            add(){
                v.arr.push({name:v.user.name,role:v.user.role,permission:v.user.permission})
            },
            del(a){
                v.arr.splice(a,1)
            }
        }
    })
</script>
</body>
</html>